<template>
  <!-- 租箱 开提箱单 -->
  <div class="app-container">
    <span style="font-weight: 700;font-size: 15px;">
      <span style="width:3px;height:20px;background-color: #2158F3;"> &nbsp</span> 开提箱单
    </span>

    <div style="margin-top: 40px;"> 租箱订单 </div>
    <el-table :data="param.rentOrderTable" style="width: 100%;">
      <el-table-column prop="orderNo" label="订单号" width="200"> </el-table-column>
      <el-table-column label="预计提箱日期" width="120">
        <template #default="scope">
          {{ formatDate(scope.row.planPickupDate, 2) }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="下单日期" width="180">
        <template #default="scope">
          {{ formatDate(scope.row.planPickupDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="packingedNum" label="已开箱量"> </el-table-column>
      <el-table-column prop="unPackingNum" label="未开箱量"> </el-table-column>
    </el-table>

    <div style="margin-top: 40px;">箱型/箱量/箱况</div>
    <el-table :data="param.rentBoxTable" style="width: 100%">
      <el-table-column prop="boxType" label="箱型" width="180"> </el-table-column>
      <el-table-column prop="boxQuantity" label="箱量" width="180"> </el-table-column>
      <el-table-column prop="boxCondition" label="箱况"> </el-table-column>
    </el-table>

    <el-form :model="param" ref="packingFormRef" :rules="packingRules" style="margin-top: 40px;">
      <el-form-item prop="instruction">
        <div>
          <redStar />放箱指令号
        </div>
        <el-input v-model="param.instruction" style="width: 100%;" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item prop="packingValidityPeriod">
        <div>
          <redStar />提箱单有效期范围
        </div>
        <el-date-picker v-model="param.packingValidityPeriod" type="daterange" range-separator="~"
          start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;" />
      </el-form-item>
      <el-form-item prop="yardName">
        <div>
          <redStar />堆场名称
        </div>
        <yardSelect v-model="param.yardName" :selectName="'yardName'" :needInfo="true" @yardId="yardInfoData"
          style="width:100%" :placeholder="'请输入堆场名称'">
        </yardSelect>
      </el-form-item>
      <el-form-item>
        <div>堆场地址</div>
        <el-input v-model="yardInfo.yardAddress" disabled style="width: 100%;" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <div>联系人</div>
        <el-input v-model="yardInfo.contacts" disabled style="width: 100%;" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <div>联系电话</div>
        <el-input v-model="yardInfo.tel" disabled style="width: 100%;" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <div>堆场作业时间</div>
        <el-input v-model="yardInfo.workTime" disabled style="width:100%" placeholder="请输入" />
      </el-form-item>
    </el-form>

    <div style="padding: 40px 0 10px 0;">
      <el-button @click="choiceBox" icon="edit">选择箱号</el-button>
    </div>
    <el-table :data="selectBoxList">
      <el-table-column prop="containerNo" label="箱号" />
    </el-table>

    <div style="margin-top: 40px;"> 提箱单附件 </div>
    <img-upload ref="packingRef" />

    <div style="margin-top: 40px;">备注 </div>
    <el-input v-model="param.remark" type="textarea" placeholder="请输入内容" />

    <div style="margin-top: 40px;height: 50px;">
      <el-button @click="handleSubmit('drawer1', 10)" type="primary" style="float: right;width: 100px;"> 提交
      </el-button>
    </div>

  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue';
import { formatDate } from '@/utils'
import { numAdd, numSub, numMulti } from '@/utils/compute'
import yardSelect from '@/components/citySelect/yardSelect.vue';
import imgUpload from '@/components/upload/index.vue'
import redStar from '@/views/components/redStar.vue';
import { getTable as getBoxTable } from '@/api/boxManage/index'

const props = defineProps({
  rowData: {
    type: Object,
    default: () => {
    }
  }
})
const filter = reactive({
  boxTypeFilter: { 5: '40HQ', 10: '40GP', 15: '20HQ', 20: '20GP' },
  boxConditionFilter: { 5: '全新', 10: '次新', 15: '适货', 20: '混提' }
})
const param = reactive({})

watch(() => props.rowData, () => {
  getSetOrderTable()
})
onMounted(() => {
  getSetOrderTable()
})

const getSetOrderTable = async () => {
  if (!props.rowData) return
  const data = props.rowData
  param.rentOrderTable = [{
    orderNo: data.orderNo,
    planPickupDate: data.planPickupDate,
    createTime: data.createTime,
    id: data.id,
    packingedNum: data.packingAllocationQuantity || 0, // 已开箱量
    unPackingNum: numSub(data.packedQuantity, data.packingAllocationQuantity),// 未开箱量
    returnedNum: data.returnedQuantity || 0,// 已还箱量
    unReturnNum: numSub(data.packedQuantity, data.returnedQuantity)// 未还箱量
  }]
  param.rentBoxTable = [{ boxType: filter.boxTypeFilter[data.boxType], boxQuantity: data.boxQuantity, boxCondition: filter.boxConditionFilter[data.boxCondition] }]
  param.returnBoxType = 10 //默认值
}

//校验
const validatePlanPackingDate = (rule: any, value: any, callback: any) => {
  // console.log(value)
  if (value[0] < new Date(new Date().setHours(0, 0, 0, 0))) {
    return callback(new Error('开始日期必须 大于等于 当前时间'))
  }
  return callback()
}
const packingRules = {
  instructionNum: [{ required: true, trigger: "blur", message: "不能为空" }],
  returnValidityPeriod: [
    { required: true, trigger: "blur", message: "不能为空" },
    { required: true, validator: validatePlanPackingDate, trigger: "blur" }
  ],
  instruction: [{ required: true, trigger: "blur", message: "不能为空" }, { pattern: /^[0-9a-zA-Z]{1,20}$/, trigger: "blur", message: "1-20位数字/字母" }],
  packingValidityPeriod: [
    { required: true, trigger: "blur", message: "不能为空" },
    { required: true, validator: validatePlanPackingDate, trigger: "blur" }
  ],
  yardName: [{ required: true, trigger: "change", message: "不能为空" }]
}

//选择集装箱
const choiceBox = () => {
  getBoxInYard()
  param.drawer2 = true
}
let selectBoxList = ref([])
const handleChoiceBox = () => {
  param.drawer2 = false
}
const handleSelectionBoxChange = (list: any) => {
  selectBoxList.value = list
  console.log(list)
}
//获取 堆存状态 箱子列表
function getBoxInYard() {
  const row = props.rowData
  let data = {
    statusList: [5], //5-堆存中、10-提箱中、15-已提、20-未还、25-还箱中 30-已卖
    containerNo: param.containerNo,
    boxType: row.boxType,
    boxCondition: row.boxCondition,
    boxEastYardId: yardInfo.value.id,
    pageNum: 1,
    pageSize: 200,
  };
  getBoxTable(data).then(res => {
    let list = res.data.list;
    list.forEach((el: any) => {
      el.boxType = filter.boxTypeFilter[el.boxType]
      el.boxCondition = filter.boxConditionFilter[el.boxCondition]
    });
    param.selectBoxTable = list;
  });
}

//堆场组件 emit 
const yardInfo = ref({})
const yardInfoData = (id: string, info: any) => {
  // param.location = id
  console.log(info)
  if (info) {
    param.yardName = info.yardName
    yardInfo.value = info
  }
}
</script>
